<template>
  <el-dialog
    v-model="props.deptDialog"
    title="部门选择"
    width="35%"
    :show-close="false"
  >
    <el-input v-model="filterText" placeholder="可输入部门名称进行搜索" />
    <el-tree
      ref="treeRef"
      :data="data"
      :props="defaultProps"
      @node-click="nodeClick"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :indent="10"
    >
      <template #default="{ node, data }">
        <span
          class="custom-tree-node show-hide"
          :class="{ active: currentNode.id == data.id }"
        >
          <el-tooltip
            :content="node.label"
            placement="top"
            v-if="node.label.length > 20"
          >
            <span class="treeLabel">{{ node.label }}</span>
          </el-tooltip>
          <span v-else>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElTree } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { getTree } from '/@/api/setting/structure'
const props = defineProps({
  deptDialog: Boolean,
  deptId: String as any
})
const emit = defineEmits(['toBackDept', 'deptSubmit'])
interface Tree {
  id: string
  deptName: string
  children?: Tree[]
  parentName: String
  parentId: string
}
const data = ref<Tree[]>([])
const defaultProps = {
  children: 'children',
  label: 'deptName'
}
let currentNode = ref({
  id: '',
  configValue: '',
  children: [],
  customizeFlag: 0,
  parentId: ''
})
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

watch(
  () => props.deptDialog,
  () => {
    if (props.deptDialog == true) {
      filterText.value = ''
      if (props.deptId == '') {
        currentNode.value.id = ''
      } else {
        currentNode.value.id = props.deptId
      }
    }
  }
)

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.deptName.includes(value)
}

const getTreeData = () => {
  getTree().then((res) => {
    if (res.code == 0) {
      data.value = res.data
    }
  })
}
getTreeData()

const dept = ref({
  id: '',
  name: ''
})
const deptName = ref('')
const cancel = () => {
  emit('toBackDept')
}
const submit = () => {
  emit('deptSubmit', dept.value)
}
const nodeClick = (val: any) => {
  currentNode.value.id = val.id
  dept.value.id = val.id
  dept.value.name = val.deptName
}
</script>
<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--el-font-size-base);
  padding-right: 8px;
}

.show-hide :nth-child(2) {
  display: none;
}

.show-hide:hover :nth-child(2) {
  display: inline-block !important;
}

.operate {
  a {
    color: var(--el-color-primary);
  }
}

.active {
  color: var(--el-color-primary);
}

.treeLabel {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
